import React, { Component } from "react";
import {Card} from "antd-mobile";
import PropTypes from "prop-types";

export default class Index extends Component {
  static propTypes = {
    rankdata: PropTypes.object.isRequired
  };
  componentDidMount() {}
  render() {
    const { name, coverImgUrl, tracks } = this.props.rankdata;
    return (
      <div>
        <Card>
          <Card.Body>
            <div className="m-i-content-listTop-container">
              <span className="m-i-content-listTop-container-l">
                <img src={coverImgUrl?coverImgUrl:null} alt={name?name:null}/>
              </span>
              <ul className="m-i-content-listTop-container-r">
                <h3>{name?name:null}</h3>
                {
                  tracks.map((item, index) => (
                  <li key={index}>
                    <span>
                      <i className="song-index">{index + 1}</i>
                      <span className="itext-color">{item.name}</span>
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </Card.Body>
        </Card>
      </div>
    );
  }
}
